<template>
<!--pages/service/service.wxml-->
<view class="container">
	<view class="card" v-for="(item, index) in orderList" :key="index" @tap="toDetail" :data-no="item.order_no">
		<view class="card-title">
			<view class="card-title-left flex-cn">
				<image class="card-title-left-img" :src="item.store_image"></image>
				<text class="card-title-left-txt">{{item.store_name}}</text>
			</view>
			<view class="flex-cn">
				<view class="refund_change_icon mar_r_10">
					<image style="width: 100%;height: 100%;" v-if="item.order_type == 2" src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173338146467514d588bd96.png" mode=""></image>
					<image style="width: 100%;height: 100%;" v-else src="https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173338162867514dfc33eec.png" mode=""></image>
				</view>
				<block v-if="item.type_name == '线上'">
					<view class="card-title-right" v-if="item.refund_status == 1">{{item.order_type == 2 ? '退货申请中' : '换货申请中'}}</view>
					<view class="card-title-right" v-if="item.refund_status == 7">{{item.order_type == 2 ? '已撤销退货申请' : '已撤销换货申请'}}</view>
					<view class="card-title-right" v-if="item.refund_status == 6">{{item.order_type == 2 ? '驳回退货申请' : '驳回换货申请'}}</view>
					<view class="card-title-right" v-if="item.refund_status == 3">{{item.order_type == 2 ? '申请退款成功' : '申请换货成功'}}</view>
					<view class="card-title-right" v-if="item.refund_status == 2 && item.order_type == 3">换货成功</view>
					<view class="card-title-right" v-if="item.refund_status == 5 && item.order_type == 2">退款中</view>
					<view class="card-title-right" v-if="item.refund_status == 2 && item.order_type == 2">退款成功</view>
					<view class="card-title-right" v-if="item.refund_status == 4">{{item.order_type == 2 ? '退货待商家收货' : '换货待商家收货'}}</view>
					<view class="card-title-right" v-if="item.refund_status == 5 && item.order_type == 3 && item.status == 2">配送中</view>
					<view class="card-title-right" v-if="item.refund_status == 5 && item.order_type == 3 && item.status == 1">商家未发货</view>
				</block>
				<block v-else>
					<view class="card-title-right" v-if="item.refund_status == 2">线下退款成功</view>
				</block>
			</view>
		</view>
		
		<view class="order-img">
			<scroll-view class="scroll-img" scroll-x="true">
				<image class="el-img" :style="{marginRight: (index2 == item.goods_info.length - 1) ? '15rpx' : ''}" v-for="(sellItem, index2) in item.goods_info" :key="index2" :src="sellItem.goods_img?sellItem.goods_img : ''"></image>
			</scroll-view>
			<view class="ellipsis">
				<view class="goods_number">
					<block>共</block>
					<block><text>{{item.goods_info.length > 0 ? item.goods_info.length : 0}}</text></block>
					<block>件</block>
				</view>
			</view>
		</view>
		<view class="card-main-column-text">退款单号：{{item.order_no}}</view>
		<view class="card-main-column-text">原单号：{{item.refund_no}}</view>
		<view class="card-main-column-text">退款时间：{{item.add_time}}</view>
		<view class="card-main-column-text" v-if="item.order_type == 2">订单总价：￥{{item.all_money}}</view>
		<view class="card-bottom" :hidden="item.refund_status == 4  || item.refund_status ==  2 || (item.refund_status ==  5 && item.order_type == 2) || item.refund_status == 7 || item.refund_status == 6">
			<view class="card-bottom-apply card-bottom-common" v-if="item.refund_status == 1" @tap.stop="updateService" :data-no="item.order_no" :data-type="item.order_type" :data-id="item.id" >修改申请</view>
			<view class="card-bottom-cancel card-bottom-common" v-if="item.refund_status == 1" @tap.stop="cancelApply" :data-id="item.id">取消申请</view>
			<view class="card-bottom-logi card-bottom-common" v-if="item.refund_status == 3 && (item.order_type == 3 ||item.order_type == 2)" @tap.stop="writeLogsitic" :data-id="item.id">填写物流信息</view>
			<view class="card-bottom-logi card-bottom-common" v-if="item.refund_status == 5 && item.order_type == 3 && item.status == 2 && (item.delivery_type == 3 || item.delivery_type == 5)" @tap.stop="toRider" :data-no="item.order_no" :data-id="item.id">骑手信息</view>
			<view class="card-bottom-logi card-bottom-common" v-if="(item.refund_status == 5 || item.refund_status == 2) && item.order_type == 3 && item.status != 1 && item.delivery_type ==4" @tap.stop="checkLogitic(index)">查看物流</view>
			<view class="card-bottom-apply card-bottom-common" v-if="item.refund_status == 5 && item.order_type == 3 && item.status == 2" @tap.stop="confirmRecived" :data-id="item.id">确认收货</view>
		</view>
	</view>
    <view class="loading">
		<block v-if="isLoading">
			<image src="https://mall.xzthealth.com/loading2.gif"></image>
			<text>加载中</text>
		</block>
		<block v-else-if="canLoad">
			<text>下拉加载更多</text>
		</block>
	</view>
	<view class="kong" style="margin: 30rpx" v-if="!canLoad&&!isLoading&&(!orderList||!orderList.length)">暂无售后订单</view>
	<view class="kong" style="margin: 30rpx" v-if="orderList&&orderList.length&&!canLoad&&!isLoading">已显示全部</view>
</view>
</template>

<script>
// pages/service/service.js
var app = getApp().globalData;

export default {
  data() {
    return {
      page: 0,
      canLoad: true,
      isLoading: false,
      orderList: ""
    };
  },
  onShow: function () {
    this.getInit();
  },
  // 下拉刷新
  onPullDownRefresh: function () {
    this.setData({
      page: 0,
      canLoad: true
    });
    this.getGoodsList(function () {
      uni.stopPullDownRefresh();
    });
  },

  /**
   * 获取更多
   */
  onReachBottom() {
    this.getGoodsList();
  },

  methods: {
	getInit(){
		this.setData({
		  page: 0,
		  canLoad: true,
		  isLoading: false
		});
		this.getGoodsList();
	},
    getGoodsList(fn) {
      if (!this.canLoad) {
        return;
      }

      this.setData({
        canLoad: false,
        isLoading: true
      });
      var page = parseInt(this.page) + 1;
      var orderList = page == 1 ? [] : this.orderList;
      getApp().globalData.sendRequest({
        url: "/Order/orderList_v4",
        type: "post",
        data: {
          page: page,
		  order_type: 2
        },
        showLoading: false,
        success: res => {
          if (res.status == 1) {
            this.setData({
              orderList: res.data ? orderList.concat(res.data) : this.orderList,
              page: page,
              canLoad: res.data.length == 10 ? true : false,
              isLoading: false
            });
          } else {
            uni.showToast({
              title: res.msg
            });
          }

          if (typeof fn == "function") {
            fn();
          }
        }
      });
    },

    // 查看物流
    checkLogitic(index) {
      uni.navigateTo({
        url: '../logistics/logistics?order_no=' + this.orderList[index].order_no + '&store_id=' + this.orderList[index].store_id
      });
    },

    //售后订单详情
    toDetail(e) {
      var order_no = e.currentTarget.dataset.no;
      uni.navigateTo({
        url: '../serviceDrawInfo/serviceDrawInfo?order_no=' + order_no
      });
    },

    /**申请售后 */
    applyService(e) {
      var order_no = e.currentTarget.dataset.no;
      uni.navigateTo({
        url: '../serviceChooseGood/serviceChooseGood?order_no=' + order_no
      });
    },

    //填写物流信息
    writeLogsitic(e) {
      var id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: '../serviceLogistic/serviceLogistic?id=' + id
      });
    },

    // 骑手信息
    toRider(e) {
      var order_no = e.currentTarget.dataset.no;
      var id = e.currentTarget.dataset.id;
      uni.navigateTo({
        url: '../../index/rider/rider?id=' + id + "&order_no=" + order_no
      });
    },

    // 确认收货
    confirmRecived(e) {
      var that = this;
      var id = e.currentTarget.dataset.id;
      uni.showModal({
        title: '确认收货',
        confirmColor: '#ff5c6d',
        content: '您是否确定收到宝贝',

        success(res) {
          if (res.confirm) {
            getApp().globalData.sendRequest({
              url: "/Customer/ReceivingGoods",
              type: "post",
              data: {
                id: id,
              },
              success: function (res) {
                if (res.status == 1) {
                  uni.showToast({
                    title: "确认收货成功"
                  });
                  that.getInit();
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none"
                  });
                }
              }
            });
          }
        }

      });
    },

    // 取消申请
    cancelApply(e) {
      var that = this;
      var id = e.currentTarget.dataset.id;
      uni.showModal({
        title: '撤销申请',
        confirmColor: '#ff5c6d',
        confirmText: '确认取消',
        cancelText: '我再想想',
        content: '您是否想要撤销该退款申请',

        success(res) {
          if (res.confirm) {
            getApp().globalData.sendRequest({
              url: "/Customer/cancelRefund",
              type: "post",
              data: {
                id: id,
              },
              success: function (res) {
                if (res.status == 1) {
                  that.getInit();
                } else {
                  uni.showToast({
                    title: res.msg,
                    icon: "none"
                  });
                }
              }
            });
          }
        }

      });
    },

    /**  
     * type ：1 修改申请  || 2 查看原因
     * */
    updateService(e) {
      var type = e.currentTarget.dataset.type;
      var id = e.currentTarget.dataset.id;
      var ischange = e.currentTarget.dataset.ischange;
      uni.navigateTo({
        url: '../../mine/serviceUpdateReason/serviceUpdateReason?type=' + type + "&id=" + id + "&ischange=" + ischange
      });
    },
  }
};
</script>
<style>
@import "./service.css";
</style>